<template>
  <div class="width1200 margin-center mgt-20">
    <div class="breadcrumb flex-center">
      <p class="title">培训服务/培训详情</p>
    </div>

    <div>
      <div class="flex">
        <el-image class="cover" :src="list.headImg" fit="cover"></el-image>
        <div class="mgl-30 flex1">
          <p class="mgb-20">
            <span class="f16 bold mgr-10">{{ list.title }}</span>
            <span class="color-red" v-if="list.state == 1">待开始</span>
            <span class="color-red" v-if="list.state == 2">进行中</span>
            <span class="color-999" v-if="list.state == 3">已结束</span>
          </p>
          <p class="mgb-5">发起人：{{ list.teacherName }}</p>
          <p>
            举办机构：<span class="tag mg-0">{{ list.school }}</span>
          </p>
          <p class="mgb-5" v-if="list.addtime">
            会议时间：
            <span class="color-666"
              >{{ list.addtime.substring(0, list.addtime.length - 3) }}~{{
                list.begintime.substring(0, list.begintime.length - 3)
              }}</span
            >
          </p>
          <p class="mgb-5" v-if="list.signEndtime">
            报名时间：
            <span class="color-666"
              >{{
                list.signBegintime.substring(0, list.signBegintime.length - 3)
              }}~{{
                list.signEndtime.substring(0, list.signEndtime.length - 3)
              }}</span
            >
          </p>
          <p class="mgb-5">举办地点：{{ list.address }}</p>
          <div class="mgt-40 flex-center">
            <div v-if="list.isSign == 0" class="btn focus">报名</div>
            <div v-if="list.isSign == 1" class="btn">已报名</div>
            <p class="mgl-10">已有{{ list.signNum }}人已报名</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 详情 -->
    <p class="bold mgt-20 mgb-10">详情介绍</p>
    <div class="mgb-20" v-html="list.content"></div>
  </div>
</template>
<script>
export default {
  name: "myTraining",
  data() {
    return {
      list: {},
      isoff: "", //1培训，2研修
      trainId: "", //培训研修id
    };
  },
  created() {
    this.init();
  },
  watch: {
    // 监听路由变化，路由变化的时候请求页面数据
    $route: function (to, from) {
      this.init();
    },
  },
  methods: {
    init() {
      this.isoff = this.$route.params.id;
      this.trainId = this.$route.params.trainId;
      if (!this.isoff) {
        return this.$message.warning("参数不合法！");
      }
      this.getTrainInfo();
    },
    getTrainInfo() {
      this.$api.train
        .getTrainInfo({
          trainId: this.trainId,
        })
        .then((d) => {
          if (d.code == 200) {
            this.list = d.data;
          } else {
            this.$message.error(d.msg);
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>
<style lang="less" scoped>
@import "../assets/css/variable.less";
.btn {
  background-color: #cb3e3e;
  opacity: 0.5;
  border-radius: 4px;
  width: 220px;
  text-align: center;
  font-size: 12px;
  color: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 34px;
  height: 34px;
  display: inline-block;
  &.focus {
    opacity: 1;
  }
}
.cover {
  width: 381px;
  height: 254px;
}
</style>